<script setup lang="ts">
import UserAvatar from "@/components/user-avatar/index.vue";

import { IChatMessage } from "@/pages/room/components/chat/chat-message.ts";

defineProps<{
    message: IChatMessage
}>();


</script>

<template>
    <div class="flex gap-2 flex-row-reverse pl-10">
        <user-avatar :size="40" :qq="message.sender?.qq" class="flex-shrink-0"/>

        <div class="flex flex-col gap-1 pt-1">
            <div class="ow-chat-bubble px-4 py-2 rounded-xl rounded-tr-none break-all leading-5 text-sm">
                {{ message.content }}
            </div>
        </div>
    </div>
</template>

<style scoped>
.ow-chat-bubble {
    color: var(--sys-chat-bubble-self-text-color);
    background: var(--sys-chat-bubble-self-background);
}
.ow-chat-sending {
    color: var(--sys-description-text-color);
}
</style>